<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>ExtInfoWindow Example: extinfowindowupdate event</title>

    <link type="text/css" rel="Stylesheet" media="screen" href="css/redInfoWindowTabs.css"/>
    <style type="text/css">
      #map{
        width: 49%;
        height: 500px;
        float: left;
      }
    </style>

    <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q"></script>
    <script src="../src/extinfowindow.js" type="text/javascript"></script>

    <script type="text/javascript">
      var map2;
      function load() {
        if (GBrowserIsCompatible()) {
          map2 = new GMap2(document.getElementById("map"));
          map2.setCenter(new GLatLng(39, -96), 4);
          map2.addControl(new GLargeMapControl());

          //marker with ext info window with a red skin
          var redIcon1 = new GIcon(G_DEFAULT_ICON);
          redIcon1.iconAnchor = new GPoint(0, 0);
          redIcon1.infoWindowAnchor = new GPoint(7, 0 );

          marker = new GMarker( new GLatLng(32, -100), redIcon1);
          GEvent.addListener(marker, 'click', 
            function(){ 
              marker.openExtInfoWindow(
                map2,
                "custom_info_window_red",
                "<p>Loading Tabs...</p>",
                {beakOffset: 3, ajaxUrl: 'ajax/ajaxTabs.html'}
              ); 
            }
          );
          GEvent.addDomListener(map2, 'extinfowindowupdate',function(){
            var windowContent = document.getElementById("custom_info_window_red_contents");
            var tabs = new Array(document.getElementById("tab0"),document.getElementById("tab1"));
            if( tabs.length > 0 ){
              var tabContentsArray = new Array(tabs.length);
              for( i=0; i < tabs.length; i++){
                tabContentsArray[i] = document.getElementById("tab"+i+"_content");
                if( i > 0){
                  hide(tabContentsArray[i]);
                }
                tabs[i].setAttribute("name", i.toString());
              
                GEvent.addDomListener(tabs[i],"click",function(){
                  var tabIndex = this.getAttribute("name");
                
                  for(tabContentIndex=0; tabContentIndex < tabs.length; tabContentIndex++){
                    if( tabContentIndex == tabIndex ){
                      show(tabContentsArray[tabContentIndex]);
                    }else{
                      hide(tabContentsArray[tabContentIndex]);
                    }
                  }
                  map2.getExtInfoWindow().resize();
                });
              }
            }
          });
          map2.addOverlay(marker);
        }
      }
      /**
       * Helper function to hide the given DOM element
       * @param {Object} element The DOM element that should be hidden
       */
      function hide(element){
        element.style.display = "none";
        element.style.position = "absolute";
      }
      /**
       * Helper function to show the given DOM element
       * @param {Object} element The DOM element that should be displayed
       */
      function show(element){
        element.style.display = "block";
        element.style.position = "relative";
      }
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map"></div>
  </body>
</html>